<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>我是DOM节点</h1>
        <p>我是DOM节点</p>
        <ul>
            <li v-for="(item,index) in arr" :key='index' ref="cur">{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script>
    // 创建VM
     let VM = new Vue({
         el:'#app',
         data:{
             arr:[]
         },

        //  组件挂载完毕执行一次 ---- 可以获取DOM节点
        mounted(){
            // 比较服务器的数据两秒之后才返回
            setTimeout(()=>{
                this.arr = ["泡面",'辣条','可乐']
            },2000);
        },

        watch:{
            // 监听arr数据的变化，数据变化了，能否获取动态Li节点
            arr(){
                // 监听arr属性值得变化  只能保证数据确实发生变化了。但是你没办法保证DOM节点v-for遍历完毕
                this.$nextTick(()=>{
                    console.log(this.$refs.cur)
                })
                // console.log(this.$refs.cur)  //undefined
            }
        }

     })
</script>